import React, { useEffect, useState } from 'react';
import { Icon, Tag, Tooltip } from 'antd';

import { obtainDictMap } from '@/pages/SalaryManage/utils';

const PROCESS_STATUS_OPTIONS = 'processStatusOptions';

/**
 * 月模板审核状态
 * @returns {JSX.Element}
 * @constructor
 */
const StatusTag = ({
    templateInfo = {
        processStatus: null,
        months: [],
        processStatusAble: true
    },
    style = {}
}) => {
    const { processStatus: status = null, months = [], processStatusAble = true } = templateInfo;

    const [tagNameEnum, setTagNameEnum] = useState({});

    const tagStyle = {
        ...style,
        marginLeft: style.marginLeft ?? '20px',
        fontSize: style.fontSize ?? '12px',
        lineHeight: style.lineHeight ?? '16px',
        verticalAlign: 'middle',
        marginBottom: '3px',
        border: 'none'
    };

    useEffect(() => {
        obtainDictMap(PROCESS_STATUS_OPTIONS).then(enumMap => {
            setTagNameEnum(enumMap);
        });
    }, []);

    const statusMapper = {
        // 编辑中
        1: {
            color: 'cyan'
        },
        // 审批中
        2: {
            color: 'orange',
            tip: true
        },
        // 已生效
        3: {
            color: 'green'
        },
        // 已重置
        4: {
            color: 'cyan'
        },
        // 编辑中（未生效）
        5: {
            color: 'cyan'
        },
        // 编辑中（被拒绝）
        6: {
            color: 'red'
        }
    };

    const statusConfig = statusMapper[status];

    if (status == null) {
        return null;
    }

    let tip = null;
    if (templateInfo?.months?.length > 0 && +status !== 3) {
        const tipTitle = (
            <div>
                <div>以下月份模板{+status === 2 ? '审批中' : '编辑中'}：</div>
                <div>{months.map(item => `${item}月`).join('，')}</div>
            </div>
        );
        tip = (
            <Tooltip title={tipTitle}>
                <Icon
                    type="question-circle"
                    style={{
                        verticalAlign: 'middle',
                        fontSize: '14px',
                        opacity: 0.65
                    }}
                />
            </Tooltip>
        );
    }

    return (
        <>
            {processStatusAble ? (
                <>
                    <Tag color={statusConfig.color} style={tagStyle}>
                        {tagNameEnum?.[PROCESS_STATUS_OPTIONS]?.[status]}
                    </Tag>
                    {tip}
                </>
            ) : null}
        </>
    );
};

export default React.memo(StatusTag);
